<template>
	<view class="content">
		<f-navbar title="售后" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_tabs">
				<van-tabs :active="active" @change="onchange" :sticky="true" :offset-top="navHeight"
					custom-class="custom_tabs" tab-active-class="class_active" type="none" :nav-class="nav_class"
					title-active-color="#EE0E6B" title-inactive-color="#000000" swipe-threshold="5.3">
					<van-tab title="全部" name="0"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
						<scroll-view @scrolltolower="lowerBottom" scroll-y="true"
							class="scrollHeight" :style="{marginTop:0+'rpx'}" 
							:scroll-top="scrollTop" :refresher-threshold="100" :refresher-triggered="triggered"
							:scroll-with-animation="true">
						<view class="info_box">
							<view class="info_item"  v-for="(item,index) in dataList" :key="index">
								<view class="info_top">
						<!-- 			<view class="info_topL">
										服务单号：2023051205236512
									</view> -->
									<view class="info_topR" v-if="item.status==-2">
										已同意
									</view>
									<view class="info_topR1" v-if="item.status==-1">
										待处理
									</view>
									<view class="info_topR2" v-if="item.status==-3">
										已驳回
									</view>
								</view>
								<view class="info_content">
									<view class="info_contentimg">
									<image class="info_contentimg1" :src="item.good_item_img" mode=""></image>
									</view>
									<view class="info_contenttxt">
										<view class="info_contenttitle">
											{{item.title}}
										</view>
										<view class="info_contentbox">
											<view class="info_contentprice">
												最低拼单价：<text class="priceicon">￥{{item.tree_price}}</text>
											</view>
											<view class="info_contentnum">
												申请数量:{{item.buy_num}}
											</view>
										</view>
									</view>
								</view>
								<view class="botton">
									<view class="botton_btn" @click="onAfterSalesDetail(item)">
										查看详情
									</view>
								</view>

							</view>
						</view>
						</scroll-view>
					</van-tab>
					<van-tab title="待处理" name="-1"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
						<scroll-view @scrolltolower="lowerBottom" scroll-y="true"
							class="scrollHeight" :style="{marginTop:0+'rpx'}" 
							:scroll-top="scrollTop" :refresher-threshold="100" :refresher-triggered="triggered"
							:scroll-with-animation="true">
						<view class="info_box">
							<view class="info_item" v-for="(item,index) in dataList" :key="index">
								<view class="info_top">
									<!-- <view class="info_topL">
										服务单号：2023051205236512
									</view> -->
									<view class="info_topR" v-if="item.status==-2">
										已同意
									</view>
									<view class="info_topR1" v-if="item.status==-1">
										待处理
									</view>
									<view class="info_topR2" v-if="item.status==-3">
										已驳回
									</view>
								</view>
								<view class="info_content">
									<view class="info_contentimg">
									<image class="info_contentimg1" :src="item.good_item_img" mode=""></image>
									</view>
									<view class="info_contenttxt">
										<view class="info_contenttitle">
											{{item.title}}
										</view>
										<view class="info_contentbox">
											<view class="info_contentprice">
												最低拼单价：<text class="priceicon">￥{{item.tree_price}}</text>
											</view>
											<view class="info_contentnum">
												申请数量:{{item.buy_num}}
											</view>
										</view>
									</view>
								</view>
								<view class="botton">
									<view class="botton_btn" @click="onAfterSalesDetail(item)">
										查看详情
									</view>
								</view>

							</view>

						</view>
						</scroll-view>
					</van-tab>
					<van-tab title="已同意" name="-2"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
						<scroll-view @scrolltolower="lowerBottom" scroll-y="true"
							class="scrollHeight" :style="{marginTop:0+'rpx'}" 
							:scroll-top="scrollTop" :refresher-threshold="100" :refresher-triggered="triggered"
							:scroll-with-animation="true">
						<view class="info_box">
							<view class="info_item" v-for="(item,index) in dataList" :key="index">
								<view class="info_top">
								<!-- 	<view class="info_topL">
										服务单号：2023051205236512
									</view> -->
									<view class="info_topR" v-if="item.status==-2">
										已同意
									</view>
									<view class="info_topR1" v-if="item.status==-1">
										待处理
									</view>
									<view class="info_topR2" v-if="item.status==-3">
										已驳回
									</view>
								</view>
								<view class="info_content">
									<view class="info_contentimg">
									<image class="info_contentimg1" :src="item.good_item_img" mode=""></image>
									</view>
									<view class="info_contenttxt">
										<view class="info_contenttitle">
											{{item.title}}
										</view>
										<view class="info_contentbox">
											<view class="info_contentprice">
												最低拼单价：<text class="priceicon">￥{{item.tree_price}}</text>
											</view>
											<view class="info_contentnum">
												申请数量:{{item.buy_num}}
											</view>
										</view>
									</view>
								</view>
								<view class="botton">
									<view class="botton_btn" @click="onAfterSalesDetail(item)">
										查看详情
									</view>
								</view>

							</view>

						</view>
						</scroll-view>
					</van-tab>
					<van-tab title="已驳回" name="-3"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
						<scroll-view @scrolltolower="lowerBottom" scroll-y="true"
							class="scrollHeight" :style="{marginTop:0+'rpx'}" 
							:scroll-top="scrollTop" :refresher-threshold="100" :refresher-triggered="triggered"
							:scroll-with-animation="true">
						<view class="info_box">
							<view class="info_item" v-for="(item,index) in dataList" :key="index">
								<view class="info_top">
								<!-- 	<view class="info_topL">
										服务单号：2023051205236512
									</view> -->
								<view class="info_topR" v-if="item.status==-2">
									已同意
								</view>
								<view class="info_topR1" v-if="item.status==-1">
									待处理
								</view>
								<view class="info_topR2" v-if="item.status==-3">
									已驳回
								</view>
								</view>
								<view class="info_content">
									<view class="info_contentimg">
									<image class="info_contentimg1" :src="item.good_item_img" mode=""></image>
									</view>
									<view class="info_contenttxt">
										<view class="info_contenttitle">
											{{item.title}}
										</view>
										<view class="info_contentbox">
											<view class="info_contentprice">
												最低拼单价：<text class="priceicon">￥{{item.tree_price}}</text>
											</view>
											<view class="info_contentnum">
												申请数量:{{item.buy_num}}
											</view>
										</view>
									</view>
								</view>
								<view class="botton">
									<view class="botton_btn" @click="onAfterSalesDetail(item)">
										查看详情
									</view>
								</view>

							</view>

						</view>
						</scroll-view>
					</van-tab>
				</van-tabs>
			</view>

		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {getAfterSales} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				active: '0',
				imgurl: getApp().globalData.imgurl,
				navHeight: 0,
				pages: 1, // 分页数据
				PageSize: 4, // 一页有多少数据
				total: null, // 总条数	
				dataList: [], // 列表数据
				triggered: false, // 设置是否下拉
			}
		},
		onLoad(options) {
			this.getheight()
			this.getList(true)
		},
		methods: {
			//触底加载
			lowerBottom() {
				// 判断是否还有下一页数据
				// if (this.pages * this.PageSize >= this.total) return person.showMoreData = true
				// 让页码值自增 +1
				// console.log('999');
				// this.pages += 1
				// 重新获取列表数据
				this.getList(false)
			},
			// 下拉刷新
			// getFresh() {
			// 	this.triggered = true,
			// 		this.getList(true)
			
			// },
			// 获取数据
			getList(isPullDownRefresh) {
				let currPage = 1
				if (!isPullDownRefresh) {
					currPage = this.pages + 1
				} else {
					currPage = 1
				}
				getAfterSales({
					type: this.active,
					page: currPage
				}).then(res => {
					// console.log(res);
					if (res.code == 1) {
						uni.hideToast()
						const newdata = res.data.list
						if (isPullDownRefresh) {
							this.dataList = newdata
							this.triggered = false
						} else {
							this.dataList = [...this.dataList, ...newdata]
						}
						this.pages = res.data.page.current
						// console.log(this.pages);
						// this.total = res.data.page.total
					} else {
						uni.showToast({
							title: res.info,
							icon:'none',
							duration:2000
						})
					}
				})
			},
			// 跳转到售后详情
			onAfterSalesDetail(e){
				uni.navigateTo({
					url:'/pages/subPack/AfterSalesDetail/AfterSalesDetail?goodid='+e.good_sku+'&ordersn='+e.order_sn
				})
			},
			
			getheight() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				console.log(menuButtonObject);
				uni.getSystemInfo({ //获取系统信息
					success: res => {
						console.log(res);
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2 + res.statusBarHeight; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						console.log(navHeight);
						this.navHeight = navHeight;
						// this.statusBarHeight = res.statusBarHeight
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			// 选择订单
			onchange(e) {
				console.log(e);
				this.active = e.detail.name
				this.getList(true)
			},
		},
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_tabs {
		width: 100%;
		height: 62rpx;
		background: #fff;
		margin-top: 4rpx;
	}

	.class_active {
		font-size: 28rpx !important;
		font-family: Hiragino Sans GB;
		font-weight: bold !important;
		color: #EE0E6B;
	}

	.custom_tabs {
		position: fixed;
	}

	/deep/.van-tab--active {
		font-size: 36rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #EE0E6B;
		position: fixed;
	}
	
	.scrollHeight {
		height: 90vh;
	}

	.info_box {}

	.info_item {
		width: 690rpx;
		/* height: 311rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.info_top {
		width: 100%;
		height: 61rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-bottom: 2rpx solid #eee;
	}

	.info_topL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
		margin-left: 20rpx;
	}

	.info_topR {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #2BA245;
		margin-right: 20rpx;
	}
	.info_topR1 {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0101;
		margin-right: 20rpx;
	}
	.info_topR2 {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #DDDDDD;
		margin-right: 20rpx;
	}

	.info_content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 31rpx;
	}

	.info_contentimg {
		width: 127rpx;
		height: 127rpx;
		/* background: #FF0000; */
		border-radius: 10rpx;
		margin-left: 20rpx;
	}
	.info_contentimg1{
		width: 100%;
		height: 100%;
	}

	.info_contenttxt {
		width: 500rpx;
		margin-right: 20rpx;
	}

	.info_contenttitle {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 42rpx;
	}

	.info_contentbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.info_contentprice {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 40rpx;
	}

	.priceicon {
		font-size: 28rpx;
		font-weight: 500;
	}

	.info_contentnum {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;

	}

	.botton {
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.botton_btn {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 62rpx;
		text-align: center;

	}
</style>